<template>
  <view>
    <!-- 顶部自定义导航 -->
    <u-navbar title="" :safeAreaInsetTop="false" bgColor="transparent">
      <view class="u-nav-slot" slot="left" @tap="$u.route({ type: 'back' })">
        <u-icon name="arrow-left" size="19" color="#fff"></u-icon>
        <view>返回</view>
      </view>
    </u-navbar>
    <u-swiper :list="productDetail.goodsCarouselPictures" :height="374" :radius="0" indicator indicatorMode="dot" @click="clickSwiper"></u-swiper>
    <!--商品信息-->
    <view class="pr-money bg-gradual-purple">
      <view class="flex m-l-30">
        <view class="font58 bolder text-white">{{ productDetail.price }}</view>
        <view class="pr-money-price text-gray">{{ productDetail.marketPrice }}</view>
      </view>
      <view class="pr-money-platform"> {{ platformName }} </view>
    </view>
    <view style="background-color: #fff">
      <view class="pr-name overtwo font32 bolder m-t-10">
        {{ productDetail.goodsName }}
      </view>
      <view class="pr-jifen flex-end">
        <view class="cu-capsule">
          <view class="cu-tag bg-green"> 预估积分 </view>
          <view class="cu-tag line-green">{{ productDetail.commission }}</view>
        </view>
      </view>
    </view>
    <!--底部商品详情-->
    <view class="detail-desc">
      <view class="d-header">
        <text>商品详情</text>
      </view>
      <scroll-view scroll-y class="product-details">
        <view v-for="(item, index) in productDetail.goodsDetailPictures" class="img-item">
          <image :src="item" mode="widthFix" lazy-load style="width: 100%"></image>
        </view>
      </scroll-view>
    </view>
    <!-- 底部操作菜单 -->
    <view class="page-bottom p-l-20 p-r-20">
      <button class="cu-btn bg-gradual-purple margin-tb-sm lg" style="width: 100%" @tap="purchase(productDetail)">立即购买</button>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    platformName() {
      switch (this.source) {
        case 'jd':
          return '京东'
        case 'douyin':
          return '抖音'
        case 'vip':
          return '唯品会'
        case 'pdd':
          return '拼多多'
        case 'kaola':
          return '考拉'
        case 'taobao':
          return '淘宝'
        default:
          return '未知'
      }
    }
  },
  data() {
    return {
      hasLoading: false,
      productId: '',
      source: '',
      productDetail: {}
    }
  },
  onLoad(options) {
    this.productId = options.id
    this.source = options.source

    this.initData()
  },
  methods: {
    //立即购买
    purchase(productDetail) {
      if (this.source === 'taobao') {
        /*  #ifdef WEB  */
        window.location.href = productDetail.shortClickUrl
        /*  #endif  */

        /*  #ifndef WEB  */
        plus.runtime.openURL(productDetail.shortClickUrl)
        /*  #endif  */
      } else if (this.source === 'douyin') {
        this.$mRouter.push({ route: '/pages/webview/webview', query: { url: encodeURIComponent(productDetail.kzUrl) } })
      } else {
        /*  #ifdef WEB  */
        window.location.href = productDetail.url
        /*  #endif  */

        /*  #ifndef WEB  */
        plus.runtime.openURL(productDetail.url)
        /*  #endif  */
      }
    },
    initData() {
      this.getProductDetail()
    },
    // 获取产品详情
    async getProductDetail() {
      await uni.$u.http
        .post('unionapi/getGoodsConvert', {
          goodsId: this.productId,
          source: this.source
        })
        .then(data => {
          this.hasLoading = false
          this.productDetail = data

          console.log(this.productDetail)
        })
        .catch(err => {
          this.loading = false
          if (err) {
            uni.showModal({
              content: err || '请重新登录!',
              success: confirmRes => {
                if (confirmRes.confirm) {
                  uni.reLaunch({
                    url: '/pages/index/login'
                  })
                }
              }
            })
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
// 导入colorUI
@import '/static/css/colorui/main.css';
@import '/static/css/colorui/icon.css';
@import '/static/css/colorui/animation.css';
.u-nav-slot {
  width: 130rpx;
  height: 50rpx;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25rpx;
  color: #fff;
}
.pr-money {
  width: 100%;
  height: 100upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .pr-money-price {
    padding-top: 30upx;
    margin-left: 25upx;
    text-decoration: line-through;
  }
  .pr-money-platform {
    width: 140upx;
    height: 100upx;
    line-height: 100upx;
    text-align: center;
    border-left: dashed 1px white;
  }
}
.pr-name {
  height: 80upx;
  width: 100%;
  padding: 0 14upx;
}
.pr-jifen {
  margin-top: 30rpx;
  height: 50upx;
  width: 100%;
  background-color: white;
  padding: 0 20upx 20upx;
}

/*  详情 */
.detail-desc {
  background: #fff;
  margin-top: 16upx;
  padding: 0 0 40upx;
  .d-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80upx;
    position: relative;
    text {
      padding: 0 20upx;
      background: #fff;
      position: relative;
      z-index: 1;
    }
    &:after {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%);
      width: 300upx;
      height: 0;
      content: '';
      border-bottom: 1px solid #ccc;
    }
  }
}

/* 底部操作菜单 */
.page-bottom {
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.1);
  padding-bottom: env(safe-area-inset-bottom);
  .page-bottom-bth-wrapper {
    width: 42vw;
    display: flex;
    align-items: center;
    margin-left: 10rpx;
    .cart {
      position: relative;
      .badge {
        position: absolute;
        top: -2upx;
        right: 4upx;
      }
    }
    .p-b-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      flex: 1;
      .iconfont {
        line-height: 1.2;
        font-size: 48upx;
        font-weight: 500;
      }
    }
  }
  .action-btn-group {
    display: flex;
    height: 76upx;
    border-radius: 100px;
    overflow: hidden;
    margin: 0 20upx;
    position: relative;
    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 180upx;
      height: 100%;
      padding: 0;
      &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        border: none;
        border-right: 1upx solid;
        transform: translateY(-50%);
        height: 28upx;
        width: 0;
      }
    }
    .action-btn:first-child {
      &:after {
        border: none;
      }
    }
    // 按钮两行显示
    .btnIn2Line {
      width: 220upx;
      line-height: 72upx;
      padding-top: 4upx;
      .text {
        line-height: 36upx;
      }
      &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        border: none;
        border-right: 1upx solid;
        transform: translateY(-50%);
        height: 28upx;
        width: 0;
      }
    }
    .btnIn2Line:first-child {
      &:after {
        border: none;
      }
    }
  }
  .action-btn-submit {
    height: 76upx;
    line-height: 76upx;
    width: 320upx;
    border-radius: 100px;
    margin: 0 20upx 0 80upx;
    &:after {
      border: 1upx solid #000;
    }
  }
}
.img-item {
  width: 100%;
  margin-top: -14upx;
}
</style>
